<template>
  <DataCollectionHeader/>
  <div class="statisticsContainer">
    <div class="statisticsBox">
      <el-row :gutter="15">
        <el-col :span="16">
          <!--数值统计-->
          <Panel 
            :options="{
              showHeader: false, 
              titleObj: {name: '数值统计', icon: 'sjcj-jichuxinxi'},
              styles: {
                background: 'rgba(28, 132, 198, 0.2)', 
                width: '100%', 
                height: '150px', 
                marginBottom: '15px',
                boxShadow: '0 0 5px rgba(28, 132, 198, 0.4)'
              }
            }"
          >
            <Number/>
          </Panel>
          <!--新增数据折线图-->
          <Panel
              :options="{
                showHeader: true,
                titleObj: {name: '新增数据', icon: 'sjcj-jilu'},
                styles: {width: '100%', height: '400px', marginBottom: '15px'}
              }">
            <template #header>
            <el-date-picker
                v-model="xzsjDateYear"
                type="year"
                placeholder="选择年">
            </el-date-picker>
            </template>
              <Line
                  id="xzsj"
                  :option="{
                    legend: {
                      data: ['新增数'],
                    },
                    xAxis: {
                      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                    },
                    series: [{
                       name: '新增数',
                       type: 'line',
                       stack: 'Total',
                       data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
                       lineStyle: {
                         color: '#91CC75'
                       },
                       itemStyle: {
                         color: '#91CC75'
                       },
                       areaStyle: {
                          color: {
                            type: 'linear', // 渐变效果
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                              { offset: 0, color: '#91CC75' }, // 顶部颜色
                              { offset: 1, color: 'rgba(145, 204, 117, 0)' } // 底部透明
                            ]
                          }
                       },
                       label: {
                        show: true, // 显示数值标签
                        position: 'top', // 标签位置（top 表示在点上方）
                        color: '#333', // 标签颜色
                        fontSize: 12, // 标签字体大小
                        formatter: '{c}' // 格式化标签为数值
                       }
                    }]
                  }"
              />
          </Panel>
          <el-row :gutter="15">
            <el-col :span="10">
              <!--合并来源饼图-->
              <Panel 
                :options="{
                  showHeader: true, 
                  titleObj: {name: '合并来源', icon: 'sjcj-genghuandanweileixing'},
                  styles: {width: '100%', height: '400px', marginBottom: '15px'}
                }"
              >
                <Pie
                    id="hblyPie"
                    :option="{
                      legend: {
                        orient: 'horizontal',
                        left: 'center',
                        top: '85%'
                      },
                      series: [{
                         radius: ['0', '65%'],
                         center: ['center', '45%'],
                         data: [ { value: 1048, name: '网站' },
                                 { value: 735, name: '微信公众号' },
                                 { value: 580, name: '小程序' },
                                 { value: 484, name: '微博' },
                                 { value: 300, name: '在线问卷' }]
                      }]
                    }"
                />
              </Panel>
            </el-col>
            <el-col :span="14">
              <!--单位成立数和开业数双折现-->
              <Panel
                  :options="{showHeader: true, titleObj: {name: '单位成立数和开业数', icon: 'sjcj-leibietongjibeifen'},
                  styles: {width: '100%', height: '400px', marginBottom: '15px'}}"
              >
                <template #header>
                  <el-date-picker
                      v-model="xzsjDateYear"
                      type="year"
                      placeholder="选择年">
                  </el-date-picker>
                </template>
                <Line
                    id="clskys"
                    :option="{
                    legend: {
                      data: ['开业数', '成立数'],
                    },
                    xAxis: {
                      data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                    },
                    series: [{
                       name: '开业数',
                       type: 'line',
                       stack: 'Total',
                       data: [134, 90, 230, 210, 120, 132, 101, 90, 230, 210, 120, 132],
                       lineStyle: {
                         color: '#91CC75'
                       },
                       itemStyle: {
                         color: '#91CC75'
                       },
                       areaStyle: {
                          color: {
                            type: 'linear', // 渐变效果
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                              { offset: 0, color: '#91CC75' }, // 顶部颜色
                              { offset: 1, color: 'rgba(145, 204, 117, 0)' } // 底部透明

                            ]
                          }
                       },
                       label: {
                        show: true, // 显示数值标签
                        position: 'top', // 标签位置（top 表示在点上方）
                        color: '#333', // 标签颜色
                        fontSize: 12, // 标签字体大小
                        formatter: '{c}' // 格式化标签为数值
                       }
                    }, {
                        name: '成立数',
                       type: 'line',
                       stack: 'Total',
                       data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90],
                       lineStyle: {
                         color: '#1D84C6'
                       },
                       itemStyle: {
                         color: '#1D84C6'
                       },
                       areaStyle: {
                          color: {
                            type: 'linear', // 渐变效果
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                             { offset: 0, color: '#1D84C6' }, // 顶部颜色
                             { offset: 1, color: 'rgba(29, 132, 198, 0)' } // 底部透明
                            ]
                          }
                       },
                       label: {
                        show: true, // 显示数值标签
                        position: 'top', // 标签位置（top 表示在点上方）
                        color: '#333', // 标签颜色
                        fontSize: 12, // 标签字体大小
                        formatter: '{c}' // 格式化标签为数值
                       }
                    }]
                  }"
                />
              </Panel>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <!--单位类型柱状图-->
          <Panel
              :options="{
                showHeader: true, titleObj: {name: '单位类型', icon: 'sjcj-danweiguanli'},
                styles: {width: '100%', height: '565px', marginBottom: '15px'}
              }"
          >
            <Bar
                id="dwlxBar"
                type="horizontal"
                :option="{
                  grid: {
                    top: '5%',
                    bottom: '5%'
                  },
                  yAxis: {
                    data: ['社会团体', '个体工商户', '外商独资企业', '国有独资公司', '股份有限公司（非上市）', '有限责任公司（法人独资）','有限责任公司（自然人投资或控股）' ]
                  },
                  series: [{
                     name: '邮件营销',
                     data: [70, 80, 110, 120, 130, 150, 200],
                     type: 'bar',
                     label:{
                       position:'right',
                    }
                  }]
                }"
            />
          </Panel>
          <!--统计类别饼图-->
          <Panel
              :options="{showHeader: true, titleObj: {name: '统计类别', icon: 'sjcj-shichangbishuai'},
              styles: {width: '100%', height: '400px'}}"
          >
            <Pie
                id="tjlbPie"
                :option="{
                  series: [{
                   data: [
                       { value: 580, name: '电子信息' },
                       { value: 1048, name: '金融服务' },
                       { value: 735, name: '计算机' },
                       { value: 484, name: '教育培训' },
                       { value: 300, name: '能源与环保' },
                       { value: 1048, name: '艺术培训' },
                       { value: 580, name: '农业种植' }
                   ]
                  }]
                }"
            />
          </Panel>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="8">
          <!--注册地区划代码饼图-->
          <Panel
              :options="{
                showHeader: true,
                titleObj: {name: '注册地区划代码', icon: 'sjcj-shenheguanli'},
                styles: {width: '100%', height: '400px'}
              }">
            <Pie
                id="zcdqhdmPie"
                :option="{
                  series: [{
                   data:[
                       { value: 284, name: '11000' },
                       { value: 310, name: '12000' },
                       { value: 948, name: '31000' },
                       { value: 480, name: '44000' },
                       { value: 780, name: '33000' },
                       { value: 848, name: '32000' },
                       { value: 335, name: '50000' }
                   ]
                  }]
                }"
            />
          </Panel>
        </el-col>
        <el-col :span="8">
          <!--机构类型饼图-->
          <Panel
              :options="{
                showHeader: true,
                titleObj: {name: '机构类型', icon: 'sjcj-jigou'},
                styles: {width: '100%', height: '400px'}
              }">
            <Pie
                id="jglxPie"
                :option="{
                  series: [{
                   data: [
                       { value: 284, name: '零售业' },
                       { value: 310, name: '电子商务' },
                       { value: 948, name: '仓储与物流' },
                       { value: 480, name: '食品加工制造业' },
                       { value: 780, name: '电子设备制造业' },
                       { value: 848, name: '医药制造业' },
                       { value: 335, name: '餐饮服务业' }
                   ]
                  }]
                }"
            />
          </Panel>
        </el-col>
        <el-col :span="8">
          <!--园区代码柱状图-->
          <Panel
              :options="{showHeader: true, titleObj: {name: '园区代码', icon: 'sjcj-yuanqu1'},
              styles: {width: '100%', height: '400px'}}"
          >
            <Bar
                id="yqdm"
                :option="{
                  grid: {
                    top: '8%',
                    bottom: '5%'
                  },
                  xAxis: {
                    data: ['10001', '20001', '30002', '40002', '60001', '70001', '80003']
                  },
                  series: [{
                     name: '邮件营销',
                     data: [120, 200, 150, 80, 70, 110, 130],
                     type: 'bar'
                  }]
                }"
            />
          </Panel>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup name="Statistics">
import DataCollectionHeader from '@/components/dataCollection/Header/index';
import Panel from './model/Panel';
import Number from './model/Number';
import Pie from './model/Pie';
import Line from './model/Line';
import Bar from './model/Bar';
import { ref, onMounted } from 'vue';
let xzsjDateYear = ref('');
onMounted(() => {
})
</script>
<style lang="scss" scoped>
.statisticsContainer{
  height: calc(100% - 70px);
  padding: 10px;
  box-sizing: border-box;
  .statisticsBox{
    height: 100%;
    padding: 5px;
    overflow-x: hidden;
    box-sizing: border-box;
  }
}
</style>